﻿module Sustainalytics.Screening {

    export interface JQuery {
        slider(value: any): any;
        slider(option: string, property: string, newValue: any): any;
    }


    var mod = angular.module(screeningToolModuleName);

    mod.directive('productInvolvementSlider', () => {

        return {
            restrict: 'E',
            scope: {
                maxValue: '=maxvalue',
                selectedvalue: '=selectedvalue',
                changeFn: '&'
            },
            replace: true,
            template: "<div style='width: 100%;'><div></div></div>",
            link: (scope: any, elem, attrs, ctrl) => {
                var slide = elem.slider({
                    range: "min",
                    min: 0,
                    max: 5,
                    slide: function (event, ui) {
                        // we want to stop sliding if slider value became greater than 3
                        if (ui.value > scope.maxValue) {
                            elem.slider("option", "value", scope.maxValue);
                            return false;
                        }
                        else {
                            if (scope.selectedvalue != ui.value)
                                scope.changeFn();
                            scope.selectedvalue = ui.value;
                        }
                    },
                    change: function (event, ui) {
                        // we want to stop sliding if slider value became greater than 3
                        if (ui.value > scope.maxValue) {
                            elem.slider("option", "value", scope.maxValue);
                            return false;
                        }
                        else {
                            if (scope.selectedvalue != ui.value)
                                scope.changeFn();
                            scope.selectedvalue = ui.value;
                        }
                    }
                });


                var maxValueClassNumber = 5 - scope.maxValue;
                $(elem.children()[0]).addClass('slider_overlay_' + maxValueClassNumber);

                scope.$watch(function () { return scope.selectedvalue; }, function (newValue) {
                    if (newValue == undefined || isNaN(newValue)) return;

                    $(elem)['slider']("option", "value", newValue);
                });
                
                var values = [
                    "Off",
                    scope.maxValue >= 1 ? "100 - 50.0%" : "",
                    scope.maxValue >= 2 ? "49.9 - 25.0%" : "",
                    scope.maxValue >= 3 ? "24.9 - 10%" : "",
                    scope.maxValue >= 4 ? "9.9 - 5.0%" : "",
                    scope.maxValue >= 5 ? "4.9 - 0%" : ""
                ];

                slide.slider("pips", { rest: "label", labels: values });
            }
        }
    });
}